<template>
<div>
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
       <van-swipe-item v-for="item in dt" :key="item.id"><img :src="item.img_url"></van-swipe-item>
    </van-swipe>
    <div class="grey">
        <div class="grey1">
            <div class="yd"><img src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png"></div>
            <div>30天无忧退货</div>
        </div>
        <div class="grey1">
            <div class="yd"><img src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png"></div>
            <div>48小时快速发货</div>
        </div>
       <div class="grey1">
            <div class="yd"><img src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png"></div>
            <div>满88元包邮</div>
        </div>
    </div>
    <div class="name">{{product.name}}</div>
    <div class="name1">{{product.goods_brief}}</div>
    <div class="price">￥{{product.retail_price}}元起</div>
    <div class="sl">
        <div class="sl1">请选择商品数量</div>
        <div class="jt"><img src=""></div>
    </div>
    <div class="cs">商品参数</div>
    <div class="det" v-for="item in det1" :key="item.id">
        <div class="det1">{{item.name}}</div>
        <div class="det2">{{item.value}}</div>
    </div>
    <div class="tpq" v-html="product.goods_desc"></div>
    <div class="dj">大家都在看</div>
    <div class="qtsp" v-for="item in lists" :key="item.id">
        <div class="qtsp1"><img :src="item.list_pic_url"></div>
        <div class="qtsp2">{{item.name}}</div>
        <div class="qtsp3">￥{{item.retail_price}}</div>
    </div>

    <div class="buy">
        <div class="sc" @click="collects"><img :src=iscollect?a:b></div>
        <router-link to="/cart"><div class="gwc">
            <img src="../../img/ic_menu_shoping_nor.png">
            <div class="jishu">{{num1}}</div>
        </div></router-link>
        <div class="ljgm">立即购买</div>
        <div class="jrgwc" @click="addcart">加入购物车</div>
        
    </div>
    <div class="mask" v-if="isshow">
        <div class="mask1" v-if="isshow">
            <div class="mask2"><img :src="product.list_pic_url"></div>
            <div class="mask3">
                <div class="red">价格￥{{product.retail_price}}</div>
                <div>请选择数量</div>
            </div>
            <div class="shul">数量</div>
            <div class="jj">
                <button @click="reduce">-</button>
                <input v-model="num">
                <button @click='adds'>+</button>
            </div>
            <div class="x" @click="close">x</div>
        </div>
    </div>

</div>

  
</template>

<script>
import {detailactions} from '@/api/home/detail/index.js'
import {addcollect} from '@/api/home/detail/collect/index.js'
import {add} from '@/api/cart/add.js'
import a from '../../img/icon_collect_checked.png'
import b from '../../img/icon_collect.png'
import {cartlist} from '@/api/cart/list.js'
export default {
    data(){
        return{
            dt:[],
            product:[],
            det1:[],
            tpd:[],
            lists:[],
            iscollect:false,
            a,
            b,
            isshow:false,
            num:1,
            num1:0,
            list1:[]

        }
    },
    methods: {
        close(){
            this.isshow=!this.isshow
        },
    onClickLeft() {
      this.$router.go(-1)
      },
    collects(){
        this.iscollect=!this.iscollect
        addcollect({
            goodsId:this.$route.params.ids,
            openId:'18568185602'
            })
        .then(res=>{
            console.log(res)
        })
    },
    addcart(){
        if(this.isshow){
            this.num1+=this.num;
            add({
                openId:'18568185602',
                goodsId:this.$route.params.ids,
                number:this.num
            })
            .then(res=>{
                console.log(res) 
                })
        }else{
            this.isshow=!this.isshow
        }
    },
    adds(num){
        this.num++
    },
    reduce(num){
        if(this.num>1){
            this.num--
        }
    },
    },
    created(){
        detailactions({
            id:this.$route.params.ids,
            openId:'oQmbb4sNZdxaUQZ0sfYgvtOP2S7c'
        })
        .then(res=>{
            console.log(res)
            this.dt=res.gallery
            this.product=res.info
            this.det1=res.attribute
            this.lists=res.productList
        }),
       cartlist({
            openId:'18568185602'
        })
        .then(res=>{
            console.log(res)
            res.data.forEach(item=>{
                this.num1+=item.number;
            })
        })
    
    }
    

}
</script>

<style lang="scss" scoped>
*{
    padding: 0;
    margin: 0;
}
.tpq{
    
    p{
        margin: 0;
        font-size: 0;
        img{
            width: 100%;
        }
    }
}
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    /* line-height: 150px; */
    width: 374px;
    height: 376px;
    text-align: center;
    background-color: #39a9ed;
    img{
        width: 100%;
    }
  }
  .grey{
      width: 100%;
      height: 60px;
      background-color: #f4f4f4;
      .grey1{
          float: left;
          width: 125px;
          height: 60px;
          margin-top: 10px;
      }
      .grey1 div{
          float: left;
          font-size: 13px;
      }
      .yd{
          margin-top: 1px;
          margin-left: 15px;
      }
  }
  .name{
      width: 100%;
      height: 60px;
      background: white;
      font-size: 20px;
      font-weight: 900;
      }
 .name1{
     width: 100%;
     height: 30px;
     font-size: 14px;
     color: grey;
     background-color: white;
   }
 .price{
     width: 100%;
     height: 50px;
     font-size: 18px;
     color: #B4282D;
 }
 .sl{
     position: relative;
     width: 100%;
     height: 50px;
     border-top: 1px solid #f4f4f4;
     border-bottom: 15px solid #f4f4f4;
     .sl1{
         width: 100px;
         height: 50px;
         margin-top: 10px;
     }
     .jt{
         position: absolute;
         top: 0;
         left: 280px;
         width: 100px;
         height: 50px;
         
     }
     
 }
 .jt img{
         width: 25px;
         height: 25px;
         margin-top: 5px;
         }
 .cs{
     width: 320px;
     height: 60px;
     margin:0 auto;
     line-height: 60px;
     text-align: left;
     font-size: 20px;
     font-weight: 900;
 }
 .det{
     position: relative;
     width: 100%;
     height: 40px;
     margin-top: 10px;
     background-color: #f4f4f4;
     
 }
.det1{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 40px;
    line-height: 40px;
    background-color: #f4f4f4;
    
     }
.det2{
    position: absolute;
     left: 100px;
     top: 0;
     width: 200px;
     height: 40px;
     line-height: 40px;
     background-color: #f4f4f4;
     text-align: left;
     }
.tbq{
    width: 100%;
    height: 200px;
}
p img {
    width: 375px;
    height: 200px;
}
.dj{
    width: 100%;
    height: 51px;
    line-height: 51px;
    font-size: 14px;
}
.qtsp{
    float: left;
    width: 187px;
    height: 240px;
}
.qtsp1{
    width: 151px;
    height: 151px;
    margin: 0 auto;
    img{
        width: 100%;
        height: 100%;
    }
}
.qstp2{
    font-size: 14px;
}
.qstp3{
    font-size: 14px;
    color: #B4282D;
    text-align: left;
}
.buy{
    position: fixed;
    bottom: 0;
    width: 375px;
    height: 52px;
    background-color: white;
}
.buy div{
    float: left;
}
.sc{
    width: 83px;
    height: 52px;
}
.sc img{
    width: 24px;
    height: 24px;
    margin-top: 15px;
}
.gwc{
    position: relative;
    width: 83px;
    height: 52px;
}
.jishu{
    position: absolute;
    top: 10px;
    right: 18px;
    background-color: red;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.gwc img{
    width: 22px;
    height: 22px;
    margin-top: 15px;
}
.ljgm{
    width: 102px;
    height: 52px;
    line-height: 52px;
}
.jrgwc{
    width: 102px;
    height: 52px;
    line-height: 52px;
    background-color: #B4282D;
    color: white;
}
.mask{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 92%;
            background:rgba(0,0,0,0.6);
            display: flex;
            align-items: center;
            justify-content: center;
}
.mask1{
    position: relative;
    width: 100%;
    height: 200px;
    background-color: white;
    margin-top: 420px;
}
.mask2{
    width:89px;
    height: 89px;
    border: 1px solid grey;
    margin-top: 10px;
    margin-left: 10px;
}
.mask2 img{
    width: 89px;
    height: 89px;
}
.red{
    color: #B4282D;
    height: 30px;
    line-height: 30px;
}
.mask3{
    position: absolute;
    top: 30px;
    margin-left: 100px;
    width: 89px;
    height: 89px;
}
.shul{
    width: 50px;
    height: 30px;
    text-align: left;
    margin-top: 5px;
    margin-left: 15px;
    font-size: 14px;
}
input{
    width: 15px;
}
button{
    width: 18px;
}
.jj{
    width: 90px;
    height: 30px;
}
</style>
